<template>
  <div class="online-inquiry layout-media-box">
    <div class="doctor-tab">
      <div class="l-panel">
        <ul>
          <li
            :class="activeName == item.name ? 'active' : ''"
            v-for="(item, index) in tabList"
            :key="index"
            @click="clickTab(item.name)"
          >
            {{ item.label }}
          </li>
        </ul>
        <div>
          <span>远程会诊</span>
          <el-switch v-model="isLine"> </el-switch>
          <span>{{ isLine ? "上线" : "下线" }}</span>
        </div>
      </div>
      <router-view></router-view>
    </div>
  </div>
</template>
<script>
export default {
  components: {
  },
  data() {
    return {
      activeName: "",
      tabList: [
        {
          label: "我的会诊",
          name: "myConsult"
        },
      ],
      isLine: false
    };
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      this.activeName = "myConsult";
    },
    clickTab(name) {
      this.activeName = name;
    },
    changeOnline(){

    }
  }
};
</script>
<style lang="scss" scoped>
.online-inquiry {
  .l-panel {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
  }
}
.inqiry-tab {
  padding: 30px;
  /deep/ .el-form-item--small.el-form-item {
    margin-right: 20px;
    /deep/ .el-select {
      width: 110px;
    }
  }
}
.doctor-tab {
  > div {
    margin-bottom: 20px;
  }
  ul {
    display: flex;
    padding: 0 30px;
    li {
      color: #535353;
      font-size: 16px;
      margin-right: 80px;
      cursor: pointer;
      padding: 30px 0;
    }
  }
  .active {
    color: #006db8;
    position: relative;
    &::after {
      position: absolute;
      content: "";
      width: 28px;
      height: 3px;
      background: #006db8;
      bottom: 0;
      right: 15px;
    }
  }
}
</style>
